<template>
	<el-dialog :title="$t('添加好友')" :visible.sync="dialogVisible" width="400px" :before-close="onClose"
		custom-class="add-friend-dialog drag-box-none">
		<el-input :placeholder="$t('输入用户名或昵称按下enter搜索，最多展示20条')" class="input-with-select" v-model="searchText"
			size="small" @keyup.enter.native="onSearch()">
			<i class="el-icon-search el-input__icon" slot="suffix" @click="onSearch()"> </i>
		</el-input>
		<el-scrollbar style="height:400px">
			<div v-for="(user) in users" :key="user.id">
				<div class="item">
					<div class="avatar">
						<head-image :name="user.nickname" :url="user.avatar" :online="user.online"></head-image>
					</div>
					<div class="add-friend-text">
						<div class="text-user-name">
							<div>{{ user.userName }}</div>
							<div :class="user.online ? 'online-status  online' : 'online-status'">{{
								user.online ? $t('[在线]') : $t('[离线]') }}</div>
							<el-tag v-if="user.status == 1" size="mini" type="danger">{{ $t('已注销') }}</el-tag>
						</div>
						<div class="text-nick-name">
							<div>{{ $t('昵称') }}:{{ user.nickname }}</div>
						</div>
					</div>
					<el-button type="success" size="mini" v-show="!user.isFriend" @click="onAddFriend(user)">{{ $t('添加')
					}}</el-button>
					<el-button type="info" size="mini" v-show="user.isFriend" plain disabled>{{ $t('已添加') }}</el-button>
				</div>
			</div>
		</el-scrollbar>
	</el-dialog>
</template>

<script>
import HeadImage from '../common/HeadImage.vue'
export default {
	name: "addFriend",
	components: { HeadImage },
	data() {
		return {
			users: [],
			searchText: ""
		}
	},
	props: {
		dialogVisible: {
			type: Boolean
		}
	},
	methods: {
		sendSocketMessage(user) {
			const timestamp = new Date().getTime();
			let socketMessage = {
				atUserIds: [],
				content: this.$t("请求添加好友"),
				id: 0,
				receipt: false,
				recvId: user.id,
				selfSend: true,
				sendId: this.$store.state.userStore.userInfo.id,
				sendTime: timestamp,
				status: 0,
				type: 7
			}

			this.$http({
				url: `/im/message/private/send`,
				method: 'post',
				data: socketMessage
			})
		},
		sendAddFriendsMessage(user) {
			let chat = {
				type: 'PRIVATE',
				targetId: user.id,
				showName: user.nickname,
				headImage: user.avatar,
				avatar: user.avatar,
				avatarThumb: user.avatarThumb,
				sendTime: new Date().getTime(),
				selfSend: true
			};
			this.$store.commit("openChat", chat);
			this.$store.commit("activeChat", 0);

			let msgInfo = {
				content: this.$t('请求添加好友'),
				type: 0,
				recvId: user.id,
			}

			this.$http({
				url: `/im/message/private/send`,
				method: 'post',
				data: msgInfo
			}).then((res) => {
				res.selfSend = true
				this.$store.commit("insertMessage", [res, chat]);
			})
		},
		onClose() {
			this.$emit("close");
		},
		onSearch() {
			if (!this.searchText) {
				this.users = [];
				return;
			}
			this.$http({
				url: "/user/findByName",
				method: "get",
				params: {
					name: this.searchText
				}
			}).then((data) => {
				this.users = data;
			})
		},
		onAddFriend(user) {
			this.$http({
				url: "/im/friend/add",
				method: "post",
				params: {
					friendId: user.id
				}
			}).then((data) => {
				this.sendSocketMessage(user)

				if (user.friendAddRestrict == 1) {
					this.$message.success("申请成功,等待对方同意");
				} else {
					this.$message.success("添加成功，对方已成为您的好友");
					let friend = {
						id: user.id,
						nickname: user.nickname,
						headImage: user.headImage,
						avatar: user.avatar,
						avatarThumb: user.avatarThumb,
						online: user.online
					}
					this.$store.commit("addFriend", friend);
					let updateFriend = this.users.find(item => item.id == user.id);
					updateFriend.isFriend = true
					this.sendAddFriendsMessage(user);
				}
			})
		},
		isFriend(userId) {
			let friends = this.$store.state.friendStore.friends;
			let friend = friends.find((f) => f.id == userId);
			return friend != undefined;
		}
	}
}
</script>

<style lang="scss">
.add-friend-dialog {
	.item {
		height: 65px;
		display: flex;
		position: relative;
		padding-left: 15px;
		align-items: center;
		padding-right: 25px;

		.add-friend-text {
			margin-left: 15px;
			flex: 3;
			display: flex;
			flex-direction: column;
			flex-shrink: 0;
			overflow: hidden;

			.text-user-name {
				display: flex;
				align-items: center;
				flex-direction: row;
				font-weight: 600;
				font-size: 16px;
				line-height: 25px;

				.online-status {
					font-size: 12px;
					font-weight: 600;

					&.online {
						color: #5fb878;
					}
				}

				.el-tag {
					border-radius: 10px;
					border: 0;
					height: 20x;
					line-height: 20px;
					font-size: 12px;
					margin-left: 3px;
				}
			}

			.text-nick-name {
				display: flex;
				flex-direction: row;
				font-size: 12px;
				line-height: 20px;
			}

		}
	}
}
</style>
